import classnames from 'classnames'
import Icon from '@/components/MyIcon'
import styles from './index.module.scss'
import { Popup } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useInitState } from '@/utils/hooks'
import {
  addChannelAction,
  allChannelAction,
  delChannelAction,
  setActiveIdAction,
} from '@/store/action/home'
import _ from 'lodash'
import { useState } from 'react'
type ChannelsPopType = {
  visible: boolean
  close: () => void
}

const Channels = ({ visible, close }: ChannelsPopType) => {
  const dispatch = useDispatch()
  const { allChannel } = useInitState(allChannelAction(), 'channelReducer')
  const { userChannel, activeId } = useSelector(
    (state: RootState) => state.channelReducer
  )
  const [edit, setEdit] = useState(false)
  const otherChannel = useSelector((state: RootState) => {
    const all = state.channelReducer.allChannel
    const user = state.channelReducer.userChannel
    // return all.filter((v) => {
    //   return !user.find((t) => v.id === t.id)
    // })
    return _.differenceBy(all, user, 'id')
  })
  // 切换选中状态
  const changeActiveId = (id: number) => {
    dispatch(setActiveIdAction(id))
  }
  // 添加频道
  const addChannel = (id: number) => {
    console.log(id)
    dispatch(addChannelAction(id))
  }
  const delChannel = (id: number) => {
    if (id === 0) return
    if (id === activeId) {
      dispatch(setActiveIdAction(0))
    }
    if (userChannel.length <= 4) return
    dispatch(delChannelAction(id))
  }
  return (
    <Popup
      position="left"
      style={{
        width: '100vw',
      }}
      visible={visible}
    >
      <div className={styles.root}>
        <div className="channel-header">
          <Icon onClick={close} type="iconbtn_channel_close" />
        </div>
        <div className="channel-content">
          {/* 编辑时，添加类名 edit */}
          <div className={classnames('channel-item', edit && 'edit')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击进入频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEdit(!edit)}
              >
                {edit ? '完成' : '编辑'}
              </span>
            </div>
            <div className="channel-list">
              {/* 选中时，添加类名 selected */}
              {userChannel.map((v) => {
                return (
                  <span
                    key={v.id}
                    className={classnames(
                      'channel-list-item',
                      activeId === v.id && 'selected'
                    )}
                    onClick={() => changeActiveId(v.id)}
                  >
                    {v.name}
                    <Icon
                      onClick={(e) => {
                        e.stopPropagation()
                        delChannel(v.id)
                      }}
                      type="iconbtn_tag_close"
                    />
                  </span>
                )
              })}
            </div>
          </div>

          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {otherChannel.map((v) => {
                return (
                  <span
                    key={v.id}
                    className="channel-list-item"
                    onClick={() => addChannel(v.id)}
                  >
                    + {v.name}
                  </span>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </Popup>
  )
}

export default Channels
